import React from 'react'
import {Row, Col} from 'antd'
import './index.less'
import Util from '../../utils/utils'
import Axios from '../../axios'
import {connect} from "react-redux";
class Header extends React.Component{
    constructor(){
        super()
        this.state ={

        }
    }
    componentWillMount(){
        this.setState({
            name:'管理员'
        })
        setInterval(()=>{
           let sysTime = Util.formatDate(new Date().getTime())
            this.setState({
                sysTime
            })
        }, 1000)
        this.getWeatherApiData()
    }
    getWeatherApiData(){
        let cityCode = 320100
        Axios.jsonp({
            url:'https://restapi.amap.com/v3/weather/weatherInfo?city='+cityCode+'&key=e9cb79cbbc4d397f63371d439bc8db73'
        }).then((res) => {
            if(res.status == 1){
               this.setState({
                   weather:res.lives[0].city+','+res.lives[0].weather+','+res.lives[0].winddirection
               })
            }
        })
    }
    render(){
        return <div className="header">
            <Row className="header-top">
                <Col span={24}>
                    <span>欢迎, {this.state.name}</span>
                    <a href="#">退出</a>
                </Col>
            </Row>
            <Row className="breadcrumb">
                <Col span={4} className="breadcrumb-title">{this.props.menuName}</Col>
                <Col span={20} className='weather'>
                    <span className='date'>{this.state.sysTime}</span>
                    <span className='weather-detail'>{this.state.weather}</span>
                </Col>
            </Row>
        </div>
    }
}
const mapStateToProps = state => {
    console.log('mapStateToProps')
    console.log(state)
    return {
        menuName:state.menuName
    }
}
export default connect(mapStateToProps)(Header)

